<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <style>
      #child {
      }
    </style>
    <div id="app">
      <parent></parent>
    </div>
    <template id="child">
      <div>
        <button @click="click">send</button>
        <input type="text" name="" id="" v-model="message" />
      </div>
    </template>

    <script>
      Vue.config.productionTip = false;

      const Feature = Vue.component("parent", {
        template:
          '<div><child @childfn="transConfit"></child>' +
          "子组件传来的值：{{message}}</div>",
        data() {
          return {
            message: "",
          };
        },
        methods: {
          transConfit(payload) {
            this.message = payload;
          },
        },
      });

      //child组件
      Vue.component("child", {
        template: "#child",
        data() {
          return {
            message: "子组件的消息",
          };
        },
        methods: {
          click() {
            this.$emit("childfn", this.message);
          },
        },
      });
      var vm = new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>
